<template>
  <div class="page">
    <div class="mr-10px">
      <slot name="beforePageBtns" />
    </div>

    <el-pagination
      v-model:current-page="state.pageNumber"
      v-model:page-size="state.pageSize"
      :page-sizes="pageSizes"
      layout="total, sizes, prev, pager, next"
      :total="total"
      background
      size="small"
      @size-change="sizeChangeHandler"
      @current-change="currentChangeHandler"
    />
    <slot name="afterPageBtns" />
  </div>
</template>
<script setup lang="ts" name="KkPaginationComponent">
const emit = defineEmits(["pushCurrentChange", "pushSizeChange"]);
const props = defineProps({
  currentPage: {
    type: Number,
    default: 1,
  },
  total: {
    type: Number,
    default: 1,
  },
  maxPageSize: {
    type: Number,
    default: 20,
  },
  pageSizes: {
    type: Array<any>,
    default: () => [20, 50, 100],
  },
});
// 初始化数据
let state = reactive({
  pageNumber: props.currentPage,
  pageSize: props.maxPageSize,
});
const sizeChangeHandler = (val: Number) => {
  state.pageNumber = 1;
  emit("pushSizeChange", val);
};
const currentChangeHandler = (val: Number) => {
  emit("pushCurrentChange", val);
};
</script>
